<template>
	<view class="container">
		<image class="lgpic" style="width: 100%;" mode="widthFix" :src="singerDetails.cover" />
		<view class="card">
			<image class="smpic" style="width: 40%;" mode="widthFix" :src="singerDetails.cover" />
			<h2>{{ this.singerDetails.name }}</h2>
			<text
				style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ this.singerIdentify.imageDesc }}</text>
		</view>
		<view class="f1"></view>
		<view class="f2" v-for="(s, i) in this.songs" :key="i">
			<text class="gq">{{ i + 1 }} {{ s.name }}</text>
		</view>
	</view>
</template>

<script>
import {
	artistTop,
	artistDetail,
	base
} from "../../service"
export default {
	data() {
		return {
			singerName: '',
			songs: [],
			singerId: 0,
			singerDetails: null,
			singerIdentify: null,
			base
		}
	},
	async onLoad() {
		this.singerId = this.$route.query.singerId
		this.singerName = this.$route.query.singerName
		uni.setNavigationBarTitle({
			title: this.singerName
		})
		let data = await artistTop(this.singerId)
		this.songs = data.songs
		console.log(this.songs)
		let data1 = await artistDetail(this.singerId)
		// console.log(data1.data)
		this.singerIdentify = data1.data.identify
		this.singerDetails = data1.data.artist
		let data2 = await uni.request({
			url: base + '/song/url?id=1296583188'
		})
		console.log(data2[1].data.data[0].url)
	},
	methods: {},
}
</script>

<style lang="scss">
.container {
	margin-top: 0%;
	align-items: center;

	// .lgpic {}

	.card {
		border-radius: $uni-border-radius-lg;
		position: absolute;
		bottom: 52%;
		width: 80%;
		align-items: center;
		z-index: 99;
		background-color: $uni-bg-color-mask;
		color: white;

		.smpic {
			border-radius: 200px;
		}
	}

	.f2 {
		width: 100%;

		.gq {
			// margin: $uni-spacing-col-sm $uni-spacing-row-base;
			padding: 5% $uni-spacing-row-lg;
			border: 1px solid gray;
			border-radius: $uni-border-radius-lg;
			font-size: 16px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

}
</style>
